<template>
  <div class="search-box">
    <i class="icon-search"></i>
    <input ref="query" :placeholder="placeholder" v-model="query" class="box">
    <i @click="clear" v-show="query" class="icon-dismiss"></i>
  </div>
</template>
<script>
import {debounce} from 'common/js/util'
export default {
  props: {
    placeholder: {
      type: String,
      default: '搜索歌曲、歌手'
    }
  },
  data() {
    return {
      query: ''
    }
  },
  created() {
    // 用函数节流的方式，让query一改变不会多次执行search方法
    this.$watch('query', debounce((newQuery) => {
      this.$emit('query', newQuery)
    }, 200))
  },
  methods: {
    blur() {
      this.$refs.query.blur()
    },
    clear() {
      this.query = ''
    },
    setQuery(query) {
      this.query = query
    }
  }
}
</script>
<style lang="stylus" scoped>
.search-box
  display: flex
  align-items: center
  width: 100%
  height: 40px
  padding: 0 6px
  box-sizing: border-box
  border-radius: 6px
  background: #333
  .icon-search
    font-size: 24px
    color: #222
  .box
    flex: 1
    background: #333
    font-size: 14px
    line-height: 18px
    margin: 0 5px
    color: #fff
    outline: 0
  .icon-dismiss
    color: #222
    font-size: 16px
</style>
